<template>
    <!-- 侧边栏 -->
    <el-aside width="200px">
        <el-scrollbar>
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                :default-active="activeIndex" text-color="#fff" 
                :unique-opened="true">
                <!-- 课程设计任务栏 -->
                <el-sub-menu v-for="menu in obj.data" :key="menu.menuid" :index="menu.menuname" >                    
                    <template #title>
                        <el-icon>
                            <Monitor />
                        </el-icon><span>{{menu.menuname}}</span>
                    </template>
                    <el-menu-item-group v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid" >                        
                         <!-- <template #title>Group 1</template> -->
                        <el-menu-item :index="'/' + chmenu.url" @click=" $router.push(chmenu.url)"><span>{{ chmenu.menuname }}</span></el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>
<script  setup>
import { ref, reactive,watch } from 'vue'
import { Menu as IconMenu, Message, School, Bicycle, Monitor } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
const route = useRoute();


const obj = reactive({
    data: [
        //课程设计任务
        {
            menuid: 1,
            icon: 'li-icon-xiangmuguanli',
            menuname: '课程设计任务',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 11,
                    icon: 'icon-order-manage',
                    menuname: '实践课程任务',
                    hasThird: 'N',
                    url: 'courseSchema',  
                    menus: null
                },  
                {
                    menuid: 12,
                    icon: 'icon-order-manage',
                    menuname: '课程设计任务管理',
                    hasThird: 'N',
                    url: "coursePublish",
                    menus: null
                },
                {
                    menuid: 13,
                    icon: 'icon-order-manage',
                    menuname: '过程任务管理',
                    hasThird: 'N',
                    url: "courseProTask",
                    menus: null
                },                   
            ]
        },
        //校内实践任务
        {
            menuid: 2,
            icon: 'li-icon-dingdanguanli',
            menuname: '校内实践课题',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 21,
                    icon: 'icon-order-manage',
                    menuname: '实践课程任务',
                    hasThird: 'N',
                    url: 'innerSchema',  
                    menus: null
                }, 
                {
                    menuid: 22,
                    icon: 'icon-order-manage',
                    menuname: '校内实践课题管理',
                    hasThird: 'N',
                    url: 'innerCampus',
                    menus: null
                },
                {
                    menuid: 23,
                    icon: 'icon-order-manage',
                    menuname: '学生选题情况',
                    hasThird: 'N',
                    url: 'innerGetStatus',
                    menus: null
                },
                {
                    menuid: 24,
                    icon: 'icon-order-manage',
                    menuname: '管理过程任务',
                    hasThird: 'N',
                    url: 'innerProTask',
                    menus: null
                },  
            ]
        },
        //学生报告
        {
            menuid: 4,
            icon: 'li-icon-dingdanguanli',
            menuname: '评分',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 41,
                    icon: 'icon-order-manage',
                    menuname: '教师评分',
                    hasThird: 'N',
                    url: 'teaScoring',
                    menus: null
                },
            ]
        },
        {
            menuid: 5,
            icon: 'li-icon-dingdanguanli',
            menuname: '数据分析',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 51,
                    icon: 'icon-order-manage',
                    menuname: '成绩统计',
                    hasThird: 'N',
                    url: 'inDataAnalysis',
                    menus: null
                },
            ]
        },
        //个人信息
        {
            menuid: 6,
            icon: 'li-icon-dingdanguanli',
            menuname: '个人信息',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 61,
                    icon: 'icon-order-manage',
                    menuname: '个人信息',
                    hasThird: 'N',
                    url: 'personal',
                    menus: null
                },
            ]
        },
        
    ],
    
})  


const activeIndex = ref('')
//监控url变化 
watch(() => route.path, (newPath, oldPath) => {
    const url = '/' + newPath.split('/')[2];
    activeIndex.value = url;
    // 在这里可以执行一些你需要的操作
});

</script>

<style scoped>

</style>
